/**********************************************************************************
* CLASS
*		BookImage
*
* DESCRIPTION
* 		Image manipulate function set:
*			- moveTo
*			- reSizeTo
*			- fadeTo
*			- rotateTo
*			- setFlip
*			- setLink
*			- removeLink
*		Common function set:
*			- genDomObj (Use by Genesis for create image by using dom.)
*			- loadDefault (For loading default value.)
*
* REVISION HISTORY
*		Revision 1.0 2008/08/02 Atthaboon S.
*		First Release
*		Revision 1.1 2008/09/06 Atthaboon S.
*		Implement prototype framework 
*
**********************************************************************************/
var BookImage = Class.create({

	/****************************************************
	* FUNCTION
	*		initialize
	*
	* DESCRIPTION
	* 		initialize the Genesis object.
	*
	* ARGUMENTS
	*		src				: 	Image source
	*		position_x		:	Image position of x at north left Genesis corner.
	*		position_y 	   	:	Image position of y at north left Genesis corner.
	*
	****************************************************/
  	initialize: function(src,position_x,position_y)
  	{
  		// Check animation running
  		this.moving   = false;
  		this.fading   = false;
  		this.resizing = false;

		// Component  	
  		this.domObj = new Element('img', { 'src':src,'style':'position:absolute; left:'+position_x+'px;top:'+position_y+'px;'});
  		this.domObj.onload = function() {
  			
    	    if(parseInt(this.width) >= parseInt(this.height))
    	    {
    	    	if(parseInt(this.width) > 300)
    	    	{
                    this.style.height = (parseInt(this.height) - (parseInt(this.width)-300))+'px';
                    this.style.width  = 300+'px';
    	    	}
    	    	else
    	    	{
    	    		this.style.width  = parseInt(this.width) +'px';
                    this.style.height = parseInt(this.height)+'px';
    	    	}
    	    }
    	    else
    	    {
    	    	if(parseInt(this.height) > 300)
    	    	{
                    this.style.width  = (parseInt(this.width) - (parseInt(this.height)-300))+'px';
                    this.style.height = 300+'px';
    	    	}
    	    	else
    	    	{
    	    		this.style.width  = parseInt(this.width)+'px';
                    this.style.height = parseInt(this.height)+'px';
    	    	}    	    	
    	    }
        };
        this.parentTag = this.domObj;
  		$(this.domObj).setOpacity(1);
		
		// For make ie 6 support png file
		if(BrowserDetect.browser == "Explorer" && BrowserDetect.version == 6 && src.search('.png') != -1)
		{
			 $(this.domObj).name = src; // if use pngHack name will be gone must to collect at name attribute
			 $(this.domObj).pngHack();
			 
		}
		
		this.property = null;
  	},
	
	/****************************************************
	* FUNCTION 
	*		getDomType
	*
	* DESCRIPTION
	* 		Use by Genesis for get Genesis dom Component Type.
	*
	* ARGUMENTS
	*
	****************************************************/
	getDomType : function()
	{
		return "BookImage";
	},
  	
    /****************************************************
	* FUNCTION 
	*		getDomObj
	*
	* DESCRIPTION
	* 		Use by Genesis for get image dom Component.
	*
	* ARGUMENTS
	*
	****************************************************/
	getDomObj : function()
	{
		return this.domObj;
	},
	
	/****************************************************
	* FUNCTION 
	*		getProperty
	*
	* DESCRIPTION
	* 		Get Image Property
	*
	* ARGUMENTS
	*
	****************************************************/
	generatePropertyBar : function()
	{
		var  ImageDomObj = $(this.domObj);
		
		this.property = new PropertyBar("Image",600);
		this.width_box       	  = this.property.addTextBox('Width','px','5',0);
		this.width_box.value      = parseInt($(this.domObj).style.width);
		this.width_box.onchange   = function() {
			ImageDomObj.style.width = this.value+'px';
			setResizeAreaPosition(_dragElement);
		}
		
		this.height_box      	  = this.property.addTextBox('Height','px','5',0);
		this.height_box.value     = parseInt($(this.domObj).style.height);
		this.height_box.onchange   = function() {
			ImageDomObj.style.height = this.value+'px';
			setResizeAreaPosition(_dragElement);
		}
		
		this.position_x_box  	  = this.property.addTextBox('Positon X','px','5',1);
		this.position_x_box.value = parseInt($(this.domObj).style.left);
		this.position_x_box.onchange   = function() {
			ImageDomObj.style.left = this.value+'px';
			setResizeAreaPosition(_dragElement);
		}
		
		this.position_y_box  	  = this.property.addTextBox('Positon Y','px','5',1);
		this.position_y_box.value = parseInt($(this.domObj).style.top);
		this.position_y_box.onchange   = function() {
			ImageDomObj.style.top = this.value+'px';
			setResizeAreaPosition(_dragElement);
		}		
		
		this.opacity_box     	  = this.property.addTextBox('Opacity','','5',0);
		this.opacity_box.value    = parseFloat($(this.domObj).getStyle('opacity'));
		this.opacity_box.onchange   = function() {
			ImageDomObj.setOpacity(this.value);
			setResizeAreaPosition(_dragElement);
		}		
	},
	
	/****************************************************
	* FUNCTION 
	*		getProperty
	*
	* DESCRIPTION
	* 		Get Image Property
	*
	* ARGUMENTS
	*
	****************************************************/	
	getProperty : function()
	{	
		// Is not generate property yet do generate it's
		if(this.property == null)
		{
			this.generatePropertyBar();
		}
		else if(this.property.getDomObj().innerHTML == '')
		{
			this.generatePropertyBar();
		}
		return this.property.getDomObj();
	},	
	
    /****************************************************
	* FUNCTION 
	*		syncProperty
	*
	* DESCRIPTION
	* 		Sync Image Property
	*
	* ARGUMENTS
	*
	****************************************************/	
	syncProperty : function()
	{
		this.width_box.value      = parseInt($(this.domObj).style.width);
		this.height_box.value     = parseInt($(this.domObj).style.height);
		this.position_x_box.value = parseInt($(this.domObj).style.left);
		this.position_y_box.value = parseInt($(this.domObj).style.top);
		this.opacity_box.value    = parseFloat($(this.domObj).getStyle('opacity'));
	},

	/****************************************************
	* FUNCTION
	*		setSize
	*
	* DESCRIPTION
	* 		Set the size of the image
	*
	* ARGUMENTS
	*		width			   :	image width.
	*		height		   	   :	image height.
           *
           * RETURN
	*
	****************************************************/
	setSize : function(width,height)
	{
		$(this.domObj).setStyle({
			width:    width +'px',
			height:  height +'px'
		});
	},
	
	/****************************************************
	* FUNCTION
	*		setPosition
	*
	* DESCRIPTION
	* 		Set the position of the image
	*
	* ARGUMENTS
	*		position_x		   :	x position.
	*		position_y	   	   :	y position.
           *
           * RETURN
	*
	****************************************************/
	setPosition : function(position_x,position_y)
	{
		$(this.domObj).setStyle({
			left:  position_x +'px',
			top:   position_y +'px'
		});
	},

	/****************************************************
	* FUNCTION
	*		moveImageTo
	*
	* DESCRIPTION
	* 		Calculate width and height for running form start to end position in the fix time limit..
	*
	* ARGUMENTS
	*		position_x		   :	x position.
	*		position_y	   	   :	y position.
	*		time			   :	time usage in milisecond from start to end.
	*
	* RETURN
	*       string			   : 	"" have another command is running
          *						   :	command for running moving()
	*
	****************************************************/
	moveImageTo : function(position_x,position_y,time)
	{
		// Is moving not complete.
		if(this.moving == true)
		{
			return "";
		}
		// Calculate width and height for 1 fps moving
		else
		{
			this.moving   = true;
			var fps    	  = 12; //12 frame per second equal to flash for web site.
			var width  	  = Math.round((position_x - parseInt(this.domObj.style.left)) /(fps*time));
			var height 	  = Math.round((position_y - parseInt(this.domObj.style.top))/(fps*time));
			
			// Round up must to round down
			if(width > 0 && width > (parseInt(this.domObj.style.left)/(fps*time)) )
			{
				width = width - 1;
			}
			else if(width < 0 && width < (parseInt(this.domObj.style.left)/(fps*time)))
			{
				width = width + 1;
			}
			if(height > 0 && height > (parseInt(this.domObj.style.top)/(fps*time)) )
			{
				height = height - 1;
			}
			else if(height < 0 && height < (parseInt(this.domObj.style.top)/(fps*time)) )
			{
				height = height + 1;
			}
			timecount = time*fps;
			return 'move('+width+','+height+','+position_x+','+position_y+','+timecount+')';
		}
	},
	
	/****************************************************
	* FUNCTION
	*		move
	*
	* DESCRIPTION
	* 		Move the image to the specific position.
	*
	* ARGUMENTS
	*		widht			   :	moving widht in x direction per 1 fps.
	*		height			   :    moving height in y direction per 1 fps.
	*		end_x		       :	end position x position.
	*		end_y	   	   	   :	end position y position.
	*		timecount		   :	time that use to running. (0 for instance move)
	*
	* RETURN
	*       Boolean            :     true if finish moving.
	*						   :     false if not finish moving.
	****************************************************/
	move : function(width,height,end_x,end_y,timecount)
	{
		if(timecount == 1 || timecount == 0)
		{
			this.moving   = false;
			$(this.domObj).setStyle({
			  	left: end_x +'px',
			  	top:  end_y +'px'
			});
			return true;
		}
		else
		{
			timecount = timecount - 1;
			$(this.domObj).setStyle({
			  	left: (parseInt($(this.domObj).getStyle('left'))+width) +'px',
			  	top:  (parseInt($(this.domObj).getStyle('top'))+height) +'px'
			});
			return 'move('+width+','+height+','+end_x+','+end_y+','+timecount+')';
		}
	},

	/****************************************************
	* FUNCTION
	*		reSizeTo
	*
	* DESCRIPTION
	* 		Resize the image.
	*
	* ARGUMENTS
	*		width		   	   :	image width.
	*		height			   :	image height
	*		time			   :	time usage in milisecond from start to end.	
	*
	* RETURN
	*       string			   : 	"" have another command is running
	*						   :	command for running reSize()
	*
	****************************************************/
	reSizeTo : function(width,height,time)
	{
		// Is moving not complete.
		if(this.resizing == true)
		{
			return "";
		}
		// Calculate width and height for 1 fps moving
		else
		{
			this.resizing     = true
			var fps    	      = 12; //12 frame per second equal to flash for web site.
			var width_div  	  = Math.round((width  - parseInt($(this.domObj).getStyle('width'))) /(fps*time));
			var height_div 	  = Math.round((height - parseInt($(this.domObj).getStyle('height')))/(fps*time));
			
			// Round up must to round down
			if(width_div  > 0 && width_div  > (parseInt(this.domObj.style.left)/(fps*time)) )
			{
				width_div  = width_div  - 1;
			}
			else if(width_div  < 0 && width_div  < (parseInt(this.domObj.style.left)/(fps*time)))
			{
				width_div  = width_div  + 1;
			}
			if(height_div > 0 && height_div > (parseInt(this.domObj.style.top)/(fps*time)) )
			{
				height_div = height_div - 1;
			}
			else if(height_div < 0 && height_div < (parseInt(this.domObj.style.top)/(fps*time)) )
			{
				height_div = height_div + 1;
			}
			timecount = time*fps;
			return 'resize('+width_div+','+height_div+','+width+','+height+','+timecount+')';
		}
	},
	
	/****************************************************
	* FUNCTION
	*		resize
	*
	* DESCRIPTION
	* 		Resize the image to the specific width, height.
	*
	* ARGUMENTS
	*		widht			   :	resize widht in x direction per 1 fps.
	*		height			   :    resize height in y direction per 1 fps.
	*		end_widht		   :	end width.
	*		end_height	   	   :	end height.
	*		timecount		   :	time that use to running. (0 for instance move)
	*
	* RETURN
	*       Boolean            :     true if finish moving.
	*						   :     false if not finish moving.
	****************************************************/
	resize : function(width,height,end_widht,end_height,timecount)
	{
		if(timecount == 1 || timecount == 0)
		{
			this.resizing = false;
			$(this.domObj).setStyle({
			  	width:   end_widht +'px',
			  	height:  end_height +'px'
			});
			return true;
		}
		else
		{
			timecount = timecount - 1;
			$(this.domObj).setStyle({
			  	width:   (parseInt($(this.domObj).getStyle('width'))+width) +'px',
			  	height:  (parseInt($(this.domObj).getStyle('height'))+height) +'px'
			});
			return 'resize('+width+','+height+','+end_widht+','+end_height+','+timecount+')';
		}
	},
	
	/****************************************************
	* FUNCTION 
	*		fadeTo
	*
	* DESCRIPTION
	* 		set Fade the image.
	*
	* ARGUMENTS
	*		fade		   	   :	fade value (default is 1) 0.01 - 1.
	*		time			   :	time usage in milisecond from start to end.	
	*
	* RETURN
	*       string			   : 	"" have another command is running
	*						   :	command for running reSize()
	*
	****************************************************/	
	fadeTo : function(fade,time)
	{
		// Is fading not complete.
		if(this.fading == true)
		{
			return "";
		}
		// Calculate fading for 1 fps
		else
		{
			this.fading 	  = true;
			var fps    	      = 12; //12 frame per second equal to flash for web site.
			var fade_div	  = (fade  - parseFloat($(this.domObj).getStyle('opacity'))) /(fps*time);
			timecount = time*fps;
			return 'fade('+fade_div+','+fade+','+timecount+')';
		}
	},
	
	
	/****************************************************
	* FUNCTION
	*		fade
	*
	* DESCRIPTION
	* 		Fade the image to the specific overlay.
	*
	* ARGUMENTS
	*		fade			   :	fade value form per 1 fps.
	*		end_fade		   :    end fade.
	*		timecount		   :	time that use to running. (0 for instance move)
	*
	* RETURN
	*       Boolean            :     true  if finish fading.
	*						   :     false if not finish fading.
	****************************************************/
	fade : function(fade,end_fade,timecount)
	{
		if(timecount == 1 || timecount == 0)
		{
			this.fading = false;
			$(this.domObj).setOpacity(end_fade);
			return true;
		}
		else
		{
			timecount = timecount - 1;
			cur_fade  = parseFloat($(this.domObj).getStyle('opacity'));
			$(this.domObj).setOpacity(cur_fade+fade);
			return 'fade('+fade+','+end_fade+','+timecount+')';
		}
	},
	
	/****************************************************
	* FUNCTION 
	*		setLink
	*
	* DESCRIPTION
	* 		set Link to another page when click the image.
	*
	* ARGUMENTS
	*		link		   	   :	link ex: http://www.kapook.com .
	*		target			   :	Target for display.	
	*									0 : _blank
	*									1 : _parent
	*									2 : _self
	*									3 : _top
	*
	****************************************************/	
	setLink : function(link,target)
	{
		if(this.parentTag != 'a' || this.parentTag != 'A')
		{
			this.parentTag = new Element('a', {});
			$(this.domObj).replace(this.parentTag);
			this.parentTag.appendChild(this.domObj);
			$(this.parentTag).setAttribute('href','');
			$(this.parentTag).setAttribute('target','');
		}
		$(this.parentTag).href = link;
		
		if(target == "0" || target == "_blank")
		{
			$(this.parentTag).target = "_blank";
		}
		else if(target == "1" || target == "_parent")
		{
			$(this.parentTag).target = "_parent";
		}
		else if(target == "2" || target == "_self")
		{
			$(this.parentTag).target = "_self";
		}
		else if(target == "3" || target == "_top")
		{
			$(this.parentTag).target = "_top";
		}
		else
		{
			$(this.parentTag).target = "_blank";
		}
	},
	
	/****************************************************
	* FUNCTION 
	*		removeLink
	*
	* DESCRIPTION
	* 		remove link from image.
	*
	* ARGUMENTS
	*
	****************************************************/	
	removeLink : function()
	{
		if(this.parentTag == 'A' || this.parentTag == 'a')
		{
			$(this.parentTag).replace(this.domObj);
		}
	}
});